<template>
  <div id="to-detail">
    <div class="bg-color-w">
      <p class="form-title">接口基本信息</p>
      <el-form v-model="Data" :label-position="'right'" label-width="160px">
        <el-row>
          <el-col :push="2" :span="10">
            <el-form-item label="接口编号:">
              <el-input v-model="Data.interfaceCode" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :push="2" :span="10">
            <el-form-item label="接口名称:">
              <el-input v-model="Data.interfaceName" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :push="2" :span="10">
            <el-form-item label="接口状态:">
              <el-input :value="messages.interfaceStatus[Data.interfaceStatus]" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :push="2" :span="10">
            <el-form-item label="接口描述信息:">
              <el-input v-model="Data.interfaceDesc" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :push="2" :span="10">
            <el-form-item label="交易类型:">
              <el-input :value="messages.transType[Data.transType]" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :push="2" :span="10">
            <el-form-item label="openid转换标识:">
              <el-input :value="messages.opendIdTranslateFlag[Data.opendIdTranslateFlag]" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :push="2" :span="10">
            <el-form-item label="流水转换标识:">
              <el-input :value="messages.orgJnlIdTranslateFlag[Data.orgJnlIdTranslateFlag]" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :push="2" :span="10">
            <el-form-item label="是否鉴权:">
            <el-switch v-model="Data.isAuthorized" disabled></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="bg-color-w mar-t-10">
      <p class="form-title">接口部署信息</p>
      <el-form v-model="Data" :label-position="'right'" label-width="160px">
        <el-row>
          <el-col :push="2" :span="10">
            <el-form-item label="所属网关环境:">
              <el-input v-model="moduleData.gwEnvName" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :push="2" :span="10">
            <el-form-item label="所属模块版本号:">
              <el-input v-model="moduleData.moduleVersion" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :push="2" :span="10">
            <el-form-item label="创建时间:">
              <el-input :value="moduleData.createTime" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :push="2" :span="10">
            <el-form-item label="开放时间:">
              <el-input v-model="moduleData.onlineTime" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :push="2" :span="10">
            <el-form-item label="最后更新时间:">
              <el-input :value="moduleData.lastedTime" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :push="2" :span="10">
            <el-form-item label="下线时间:">
              <el-input :value="moduleData.offlineTime" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="bg-color-w mar-t-10">
      <p class="form-title">报文定义-请求参数</p>
      <el-table :data="packetData.reqPacketList">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="fieldCode" label="参数"></el-table-column>
        <el-table-column prop="fieldType" label="类型"></el-table-column>
        <el-table-column label="是否必输">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.fieldRequired" :disabled="true"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="fieldLength" label="长度"></el-table-column>
        <el-table-column prop="fieldName" label="中文名称"></el-table-column>
        <el-table-column prop="fieldDefVal" label="示例值"></el-table-column>
        <el-table-column prop="fieldEncoding" label="编码方式"></el-table-column>
        <el-table-column prop="fieldPattern" label="检查规则"></el-table-column>
      </el-table>
    </div>
    <div class="bg-color-w mar-t-10">
      <p class="form-title">报文定义-响应参数</p>
      <el-table :data="packetData.resPacketList">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="fieldCode" label="参数"></el-table-column>
        <el-table-column prop="fieldType" label="类型"></el-table-column>
        <el-table-column label="是否必输">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.fieldRequired" :disabled="true"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="fieldLength" label="长度"></el-table-column>
        <el-table-column prop="fieldName" label="中文名称"></el-table-column>
        <el-table-column prop="fieldDefVal" label="示例值"></el-table-column>
        <el-table-column prop="fieldEncoding" label="编码方式"></el-table-column>
        <el-table-column prop="fieldPattern" label="检查规则"></el-table-column>
      </el-table>
    </div>
    <!--<div class="bg-color-w mar-t-10">-->
      <!--<p class="form-title">接口头定义-异常信息</p>-->
      <!--<el-table :data="errorData.list" ref="table">-->
        <!--<el-table-column type="index" width="50"></el-table-column>-->
        <!--<el-table-column prop="errorCode" label="错误代码"></el-table-column>-->
        <!--<el-table-column prop="errorDesc" label="描述"></el-table-column>-->
        <!--<el-table-column prop="errorMsg" label="解决方案"></el-table-column>-->
      <!--</el-table>-->
    <!--</div>-->
  </div>
</template>
<script type='text/ecmascript-6'>
  import ajax from '../../../../../api/ajax/ajax'
  import api from '../../../../../api/url'
  export default {
    name: 'set-err-msg',
    props: {
      Data: {},
      messages: {}
    },
    watch: {
      Data () {
        this.getInitializeData()
        this.getPacketList()
        this.getListInterfaceLinkError()
      }
    },
    data () {
      return {
        moduleData: {},
        errorData: {},
        packetData: {}
      }
    },
    methods: {
      // 获取报文定义
      getPacketList () {
        ajax.post(api.LISTINTERFACELINKPACKET, {interfaceId: this.Data.interfaceId}, true).then(res => {
          this.packetData = res
        }).catch(res => {
          this.$message({
            showClose: true,
            message: res.errorMsg,
            type: 'warning'
          })
        })
      },
      // 获取错误信息列表
      getListInterfaceLinkError () {
        ajax.post(api.LISTINTERFACELINKERROR, {interfaceId: this.Data.interfaceId}, true).then(res => {
          this.errorData = res
        }).catch(res => {
          this.$message({
            showClose: true,
            message: res.errorMsg,
            type: 'warning'
          })
        })
      },
        transTime (e, format) {
          switch (format) {
            case 't':
              let date = new Date(e)
              return date.getFullYear() + '-' + date.getMonth() + '-' + date.getDate() + '  ' + date.getHours() + ':' + date.getMinutes() + '-' + date.getSeconds()
          }
        },
      // 获取模块信息
      getInitializeData () {
        ajax.post(api.VIEWAPIINTERFACE, {interfaceId: this.Data.interfaceId}, true).then(res => {
          this.moduleData = res.module
          this.moduleData.createTime = this.transTime(this.moduleData.createTime, 't')
          this.moduleData.lastedTime = this.transTime(this.moduleData.lastedTime, 't')
          this.moduleData.onlineTime = this.transTime(this.moduleData.onlineTime, 't')
          this.moduleData.offlineTime = this.transTime(this.moduleData.offlineTime, 't')
        }).catch(res => {
          this.$message({
            showClose: true,
            message: res.errorMsg,
            type: 'warning'
          })
        })
      }
    },
    mounted () {
      this.getInitializeData()
      this.getPacketList()
      this.getListInterfaceLinkError()
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
  #to-detail
    .bg-color-w
      background-color white
    .mar-t-10
      margin-top 10px
    .form-title
      padding 10px
</style>
